
<template>
  <div id="footerPage">
    <div class="view">
      <el-row style="padding: 38px;" class="footer1">
        <el-col :span="6"><img style="width: 100%;margin: 60px 0" src="../../../static/img/418.png" alt=""></el-col>
        <el-col :span="4" v-for="(item,index) in footerData" :key="index">
          <div style="font-size: 18px;padding: 15px 0;" >{{item.title}}</div>
          <ul>
            <li v-for="p in item.children">
              <router-link :to="p.path">{{p.title}}</router-link>
            </li>
          </ul>
        </el-col>
        <el-col :span="6" class="four">
          <div style="font-size: 18px;padding: 15px 0;">APP下载</div>
          <div class="appDownload clearfix">
            <img v-if='appDownShow' :src="imgIOS" alt="苹果版下载" />
            <img v-else :src="imgAndroid" alt="安卓版下载" />
            <div class='imgBox'>
              <p v-if='appDownShow' style="font-size: 16px;">Iphone版</p>
              <p v-else style="font-size: 16px;">Android版</p>
              <p>手机投注 随时随地</p>
              <span v-if='appDownShow' class="ios-red"></span>
              <span v-else class="ios" @click = 'changeDownload'></span>
              <span v-if='appDownShow' class="android" @click = 'changeDownload'></span>
              <span v-else class="android-red"></span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="footer2">
      <div class="text">2015-2017©800万彩票网 | 客服邮箱：800wan@163.com </div>
      <div class="text">彩票网郑重提示：彩票有风险，投注需谨慎！ 不向未满18周岁的青少年出售彩票</div>
    </div>
    <div class="footer3"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        footerData: [
          {
            title: '账户相关',
            children: [
              {
                title: '如何注册账号',
                path: '/problem'
              },
              {
                title: '怎么找回登录密码',
                path: '/problem'
              },
              {
                title: '如何修改手机号码',
                path: '/problem'
              },
              {
                title: '如何修改真实姓名',
                path: '/problem'
              }
            ]
          },
          {
            title: '充值购彩',
            children: [
              {
                title: '如何进行充值',
                path: '/problem'
              },
              {
                title: '如何购买彩票',
                path: '/problem'
              },
              {
                title: '如何查询购彩记录',
                path: '/problem'
              },
              {
                title: '充值没到账怎么办',
                path: '/problem'
              }
            ]
          },
          {
            title: '兑奖提款',
            children: [
              {
                title: '怎样进行兑奖',
                path: '/problem'
              },
              {
                title: '如何进行提款',
                path: '/problem'
              },
              {
                title: '提款是否收手续费',
                path: '/problem'
              },
              {
                title: '提款不成功怎么办',
                path: '/problem'
              }
            ]
          }
        ],
        appDownShow: true,
        imgIOS: '../../../static/img/andriod.png',
        imgAndroid: '../../../static/img/andriod.png'
      }
    },
    methods: {
      changeDownload () {
        this.appDownShow = !this.appDownShow
      }
    }

  }
</script>

<style lang="less">
  #footerPage {
    height: 300px;
    background-color: #f5f5f5;
    .footer1 > div {
      padding-left: 22px;
      text-align: left;
      border-right: 1px solid #ccc;
      height: 100%;
    }
    .footer1 li {
      padding-top: 8px;
    }
    .footer1 .four {
      border: none;
    }
    .appDownload img {
      float: left;
      width: 85px;
      height: 85px;
      margin-right: 20px;
    }
    .appDownload div {
      float: left;
    }
    .appDownload p {
      line-height: 22px;
    }
    .appDownload {
      span {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin: 10px 20px 0 0;
        cursor: hand;
        cursor: pointer;
      }
      .ios {
        background: url("../../../static/img/ios.png") center no-repeat;
        background-size: cover;
      }
      .ios-red, .ios:hover {
        background: url("../../../static/img/ios-red.png") center no-repeat;
        background-size: cover;
      }
      .android {
        background: url("../../../static/img/android.png") center no-repeat;
        background-size: cover;
      }
      .android-red, .android:hover {
        background: url("../../../static/img/android-red.png") center no-repeat;
        background-size: cover;
      }
    }
  }
</style>
